<template>
	<el-dialog :close-on-click-modal="false" :close-on-press-escape="false" title="编辑" width="600px"
		:model-value="visible" @close="onCancel">
		<template #footer>
			<el-button key="back" @click="() => onCancel()">取消</el-button>
			<el-button key="submit" type="primary" :loading="onSubmitLoading" @click="onFinish">提交</el-button>
		</template>

		<el-form :model="modelRef" :rules="rulesRef" ref="formRef" label-width="120px">
			<el-form-item label="父模块" prop="type">
				<el-tree-select v-model="modelRef.parentId" :data="list" :render-after-expand="false" default-expand-all
					check-strictly=true>

				</el-tree-select>
			</el-form-item>
			<el-form-item label="name" prop="Name">
				<el-input v-model="modelRef.name" placeholder="请输入模块名称" />
			</el-form-item>
			<el-form-item label="path" prop="Path">
				<el-input v-model="modelRef.path" placeholder="请输入模块路径" />
			</el-form-item>
			<el-form-item label="title" prop="Title">
				<el-input v-model="modelRef.title" placeholder="请输入模块标题" />
			</el-form-item>
			<el-form-item label="redirect" prop="Redirect">
				<el-input v-model="modelRef.redirect" placeholder="请输入模块重定向路径" />
			</el-form-item>

			<el-form-item label="图标[icon]" prop="Icon">
				<el-input v-model="modelRef.icon" />
			</el-form-item>
			<el-form-item label="component" prop="Component">
				<el-input v-model="modelRef.component" />
			</el-form-item>
			<el-form-item label="菜单显示" prop="Hidden">
				<el-switch v-model="modelRef.hidden" active-text="不显示" inactive-text="显示" />
			</el-form-item>
			<el-form-item label="排序" prop="Sn">
				<el-input v-model="modelRef.sn" type="number" />
			</el-form-item>
			<el-form-item label="页面按钮" prop="btns">
				<page-button :data="modelRef.btns" :setBtns="setBtns"></page-button>
			</el-form-item>


			<el-form-item label="模块说明" prop="Description">
				<el-input v-model="modelRef.description" placeholder="请输入模块说明" />
			</el-form-item>
		</el-form>



	</el-dialog>
</template>
<script lang="ts">
	import { defineComponent, PropType, reactive, ref, watch } from "vue";
	import { useI18n } from "vue-i18n";
	import { ElForm, ElMessage } from "element-plus";

	import { TableListItem, PageButtonItem } from "../data.d";
	import PageButton from "./PageButton.vue";


	interface UpdateFormSetupData {
		modelRef : TableListItem;
		rulesRef : any;
		formRef : typeof ElForm;
		resetFields : () => void;
		onFinish : () => Promise<void>;
	}

	export default defineComponent({
		name: 'UpdateForm',
		props: {
			list: {
				type: Array,
				required: true
			},
			visible: {
				type: Boolean,
				required: true
			},
			values: {
				type: Object as PropType<Partial<TableListItem>>,
				required: true
			},
			onCancel: {
				type: Function,
				required: true
			},
			onSubmitLoading: {
				type: Boolean,
				required: true
			},
			onSubmit: {
				type: Function as PropType<(values : TableListItem, resetFields : () => void) => void>,
				required: true
			}
		},
		components: {
			PageButton
		},
		methods: {
			setBtns(btns : PageButtonItem[]) : void {
				this.modelRef.btns = JSON.stringify(btns);
			}
		},
		setup(props) : UpdateFormSetupData {
		
			const { t } = useI18n();
			// 表单值
			const modelRef = reactive<TableListItem>({
				id: props.values.Id || 0,
				redirect: props.values.Redirect || '',
				hidden: props.values.Hidden || false,
				icon: props.values.Icon || '',
				description: props.values.Description || '',
				title: props.values.Title || '',
				path: props.values.Path || '',
				component: props.values.Component || '',
				name: props.values.Name || '',
				btns: props.values.Btns || '',
				sn: props.values.Sn || 0,
				parentId: props.values.ParentId || 0
			});
			// 表单验证
			const rulesRef = reactive({
				id: [],
				name: [{
					required: true,
					validator: async (rule : any, value : string) => {
						if (value === '' || !value) {
							throw new Error('请输入名称');
						} else if (value.length > 15) {
							throw new Error('长度不能大于15个字');
						}
					}
				},],
				path: [{
					required: true,
					validator: async (rule : any, value : string) => {
						if (value === '' || !value) {
							throw new Error('请输入路径');
						}
					}
				},],
				title: [{
					required: true,
					validator: async (rule : any, value : string) => {
						if (value === '' || !value) {
							throw new Error('请输入页面标题');
						}
					}
				},]
			});
			// form
			const formRef = ref<typeof ElForm>();
			// 重置
			const resetFields = () => {
				formRef.value && formRef.value.resetFields();
			}
			// 提交
			const onFinish = async () => {
				try {
					const valid : boolean = formRef.value ? await formRef.value.validate() : false;
					if (valid === true) {
						props.onSubmit(modelRef, resetFields);
					}
				} catch (error) {
					// console.log('error', error);
					ElMessage.warning(t('app.global.form.validatefields.catch'));
				}
			};

			return {
				modelRef,
				rulesRef,
				formRef: formRef as unknown as typeof ElForm,
				resetFields,
				onFinish
			}

		}
	})
</script>